<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>马蜂窝-首页</title>
    <link href="home.css" rel="stylesheet">
</head>
<body>

<!--============1. 头部导航 nav====================-->
<div class="nav">
    <div class="head-logo">
        <a href=""></a>

    </div>
    <div class="head-nav">
        <ul>
            <li><a href="" class="first-item">首页</a></li>
            <li><a href="">目的地</a></li>
            <li><a href="">旅游攻略</a></li>
            <li><a href="">去旅行</a>
                <!--<ul class="second-nav">-->
                <!--<li><a href="">自由行</a> </li>-->
                <!--<li><a href="">跟团游</a> </li>-->
                <!--<li><a href="">当地游</a> </li>-->
                <!--</ul>-->
            </li>
            <li><a href="">机票</a></li>
            <li><a href="">订酒店</a></li>

        </ul>
    </div>
    <div class="head-login">
        <a href="">登录</a>
        <span class="split">|</span>
        <a href="">注册</a>
    </div>
</div>


<!--============2. 横幅banner====================-->
<div class="banner">
    <a href="" class="show-img">
        <img src="images/banner.jpg">
    </a>
    <ul class="show-nav">
        <li><a href=""><img src="images/small-banner1.png"></a></li>
        <li><a href=""><img src="images/small-banner2.png"></a></li>
        <li><a href=""><img src="images/small-banner3.png"></a></li>
        <li><a href=""><img src="images/small-banner4.png"></a></li>
        <li><a href=""><img src="images/small-banner5.png"></a></li>


    </ul>

    <div class="search-area">
        <form action="" class="search-form">
            <input type="text" class="keyword" placeholder="搜索目的地或攻略">
            <a href="" class="search-btn"></a>
        </form>
    </div>

</div>

<!--============3. 主要内容 main====================-->
<div class="main">

<!--左边推广-->
<div class="aside-ad">
    <ul>
        <li class="ad-item">
            <a href="">旅行家专栏</a>
        </li>
        <li class="ad-text">
            <a href=""><img src="images/left01.jpeg">夏木尼，小王子的玫瑰城市</a>

            <p>夏木尼（Chamounix）是法国勃朗峰脚下最著名的小城，《小王子》里的玫瑰城市，世界登山运动的发源地。</p>
        </li>
        <li class="ad-text">

            <a href=""><img src="images/left02.jpeg">暹粒油淋鱼</a>

            <p>默默等待，鱼上桌，迅速夹一口塞在嘴里——我就像个戒烟多日的老烟枪终于抽上了烟，心里的空洞瞬间被填满了。</p>
        </li>
        <li class="ad-text">
            <a href=""><img src="images/left03.jpeg">西安：旧长安的画皮</a>

            <p>西安这座曾经的13朝古都，在今天更像旧长安的画皮，城墙完整绵延，一切就像一张唐画的影印本。</p>
        </li>
        <li class="ad-text">
            <a href=""><img src="images/left04.jpeg">漫山岛</a>

            <p>漫山岛在第二条路上，满眼都是天赋，却偏爱挥霍青山绿水，用自己的方式过小日子，即便强行拖它起来，也得不到结果。</p>
        </li>
        <li class="ad-text">
            <a href=""><img src="images/left05.jpeg">胡日尔镇的美术馆</a>

            <p>我最终从胡日尔的美术馆里带走了一幅画，画的是冬日的萨满岩，是日落时分。</p>
        </li>

    </ul>

</div>
<!--右边游记列表-->
<div class="right-note-list">
    <a id="item1" class="list-item">热门游记</a>
    <a id="item2" class="list-item">最新发表</a>


    <a class="list-write" href="">
        <img class="list-write-logo" src="images/write.svg"/>
        <span class="list-write-text">写游记</span>
    </a>

    <hr class="list-hr"/>
    <div class="notes">
        <div class="list">
            <div class="note">
                <div class="note-img">
                    <a href=""><img src="images/right01.jpg"></a>
                </div>
                <div class="note-wrapper">
                    <dt>
                        <a href="">厦门——一座心心念念已久的城市！</a>
                    </dt>
                    <dd>
                        <a href="">多年前，我一好哥们儿给我发信息， 他说，“我准备去 厦门 拍婚纱，要不一起顺便去 厦门 玩儿几天吧，反正也一直没去过。” 我说：“行啊，那你提前把时间计划好。”
                            可是等他们安排好时间，...</a>
                    </dd>
                    <div class="note-extra">
                                <span class="note-user">
                                    <a href=""><img src="images/head.jpeg"></a>
                                    <a class="username">大大泡泡糖</a>
                                </span>
                    </div>
                </div>
            </div>
            <div class="note">
                <div class="note-img">
                    <a href=""><img src="images/right02.jpg"></a>
                </div>
                <div class="note-wrapper">
                    <dt>
                        <a href="">探寻千年古城，感受世遗泉州赋予的魅力！</a>
                    </dt>
                    <dd>
                        <a href="">——序 可能对于很多不了解 福建 的人来说， 厦门 是他们唯一熟知的城市，只要说起 福建 的旅游，大家都会想到 厦门 ，但 福建 并不是只有 厦门 ，在 厦门
                            的隔壁就有这么一座千年古城等待...</a>
                    </dd>
                    <div class="note-extra">
                                <span class="note-user">
                                    <a href=""><img src="images/head.jpeg"></a>
                                    <a class="username">大大泡泡糖</a>
                                </span>
                    </div>
                </div>
            </div>
            <div class="note">
                <div class="note-img">
                    <a href=""><img src="images/right03.jpg"></a>
                </div>
                <div class="note-wrapper">
                    <dt>
                        <a href="">不典型蓉城夏日之旅（成都巴适指南2.0版本）</a>
                    </dt>
                    <dd>
                        <a href="">预览 | 百去不厌的天府之城 也不知道从什么时候起，每年去一趟 成都 变成了生活中的重要KPI。
                            这里古今交织、安逸舒适、热闹繁华、幸福感超高，自然让无数人流连忘返，而每次在这座城中用心....</a>
                    </dd>
                    <div class="note-extra">
                                <span class="note-user">
                                    <a href=""><img src="images/head.jpeg"></a>
                                    <a class="username">大大泡泡糖</a>
                                </span>
                    </div>
                </div>
            </div>
            <div class="note">
                <div class="note-img">
                    <a href=""><img src="images/right04.jpg"></a>
                </div>
                <div class="note-wrapper">
                    <dt>
                        <a href="">辞职去新疆｜北疆山河烂漫&南疆人间烟火，</a>
                    </dt>
                    <dd>
                        <a href="">【序】7年央企，我辞职了！ 这是我第一次来 新疆 ，充满各种好奇与期待。 这是我第一次来 新疆 ，如果我描述不好她的美好，那你一定要去亲自感受。 这是我第一次来 新疆
                            ，还有二次、三次，...</a>
                    </dd>
                    <div class="note-extra">
                                <span class="note-user">
                                    <a href=""><img src="images/head.jpeg"></a>
                                    <a class="username">大大泡泡糖</a>
                                </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="list">

            <div class="note">
                <div class="note-img">
                    <a href=""><img src="images/right03.jpg"></a>
                </div>
                <div class="note-wrapper">
                    <dt>
                        <a href="">不典型蓉城夏日之旅（成都巴适指南2.0版本）</a>
                    </dt>
                    <dd>
                        <a href="">预览 | 百去不厌的天府之城 也不知道从什么时候起，每年去一趟 成都 变成了生活中的重要KPI。
                            这里古今交织、安逸舒适、热闹繁华、幸福感超高，自然让无数人流连忘返，而每次在这座城中用心....</a>
                    </dd>
                    <div class="note-extra">
                                <span class="note-user">
                                    <a href=""><img src="images/head.jpeg"></a>
                                    <a class="username">大大泡泡糖</a>
                                </span>
                    </div>
                </div>

            </div>
            <div class="note">
                <div class="note-img">
                    <a href=""><img src="images/right04.jpg"></a>
                </div>
                <div class="note-wrapper">
                    <dt>
                        <a href="">辞职去新疆｜北疆山河烂漫&南疆人间烟火，</a>
                    </dt>
                    <dd>
                        <a href="">【序】7年央企，我辞职了！ 这是我第一次来 新疆 ，充满各种好奇与期待。 这是我第一次来 新疆 ，如果我描述不好她的美好，那你一定要去亲自感受。 这是我第一次来 新疆
                            ，还有二次、三次，...</a>
                    </dd>
                    <div class="note-extra">
                                <span class="note-user">
                                    <a href=""><img src="images/head.jpeg"></a>
                                    <a class="username">大大泡泡糖</a>
                                </span>
                    </div>
                </div>
            </div>
            <div class="note">
                <div class="note-img">
                    <a href=""><img src="images/right01.jpg"></a>
                </div>
                <div class="note-wrapper">
                    <dt>
                        <a href="">不典型蓉城夏日之旅（成都巴适指南2.0版本）</a>
                    </dt>
                    <dd>
                        <a href="">预览 | 百去不厌的天府之城 也不知道从什么时候起，每年去一趟 成都 变成了生活中的重要KPI。
                            这里古今交织、安逸舒适、热闹繁华、幸福感超高，自然让无数人流连忘返，而每次在这座城中用心....</a>
                    </dd>
                    <div class="note-extra">
                                <span class="note-user">
                                    <a href=""><img src="images/head.jpeg"></a>
                                    <a class="username">大大泡泡糖</a>
                                </span>
                    </div>
                </div>
            </div>
            <div class="note">
                <div class="note-img">
                    <a href=""><img src="images/right02.jpg"></a>
                </div>
                <div class="note-wrapper">
                    <dt>
                        <a href="">辞职去新疆｜北疆山河烂漫&南疆人间烟火，</a>
                    </dt>
                    <dd>
                        <a href="">【序】7年央企，我辞职了！ 这是我第一次来 新疆 ，充满各种好奇与期待。 这是我第一次来 新疆 ，如果我描述不好她的美好，那你一定要去亲自感受。 这是我第一次来 新疆
                            ，还有二次、三次，...</a>
                    </dd>
                    <div class="note-extra">
                                <span class="note-user">
                                    <a href=""><img src="images/head.jpeg"></a>
                                    <a class="username">大大泡泡糖</a>
                                </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


<!--============4. 底部footer====================-->
<div class="footer"></div>

</body>
</html>